﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>支付方式配置页</title>
    <link rel="shortcut icon" href="favicon.ico">
    @*<link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
        <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
        <link href="/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
        <link href="/css/animate.css" rel="stylesheet">
        <link href="/css/style.css?v=4.1.0" rel="stylesheet">
        <link href="~/css/plugins/chosen/chosen.css" rel="stylesheet" />*@
        @Styles.Render("~/css/admin") 
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox-title">
            <h5>支付方式配置</h5>
        </div>
        <div class="ibox-content">
            <div class="row row-lg">
                <div class="col-sm-12">
                    <table id="tb_payment"></table>
                </div>
            </div>
        </div>
    </div>
    <!--table工具栏-->
    <div id="toolbar">
        <button type="button" class="btn btn-outline btn-default" onclick="add('添加')">
            <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
        </button>
    </div>
    <!--编辑框-->
    <div id="edit" class="container-fluid" style="display:none;">
        <div class="ibox-content">
            <form enctype="multipart/form-data" id="form_edit" class="form-horizontal" method="post" action="/Admin/WebSite/Edit_ConfigPayMent">
                <input id="ID" name="ID" style="display:none;" />
                
                <div class="form-group">
                    <label class="col-sm-3 control-label">支付名称：</label>
                    <div class="col-sm-8">
                        <input id="title"   name="title" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">商户目录名：</label>
                    <div class="col-sm-8">
                        <select id="name" name="name" data-placeholder="选择目录" class="chosen-select" tabindex="4">
                            <option value="">请选择目录</option>
                            <option value="weixin">微信官网目录</option>
                            <option value="yifubao">易付宝目录</option>
                            <option value="dinpay">智付目录</option>
                            <option value="mopay">摩宝目录</option>
                            <option value="yompay">优付目录</option>
                            <option value="shanpay">闪付目录</option>
                            <option value="qianpay">钱海支付目录</option>
                            <option value="shangpay">商银目录</option>
                            <option value="tonghui">通汇目录</option>
                            <option value="kuaifu">快付</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">商户号：</label>
                    <div class="col-sm-8">
                        <input id="mch_id" name="mch_id" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">商户密钥：</label>
                    <div class="col-sm-8">
                        <input id="api_key" name="api_key" class="form-control" />
                    </div>
                </div>
                <div class="form-group" name="wechat" id="fileShow">
                    <label class="col-sm-3 control-label">文件名：</label>
                    <div class="col-sm-8">
                        <input id="file" name="file" readonly style="width:242px;">
                        <a style="margin-left:10px;" href="javascript:ANewUpload()">重新上传</a>
                    </div>
                </div>
                <div class="form-group" name="wechat" id="fileUp">
                    <label class="col-sm-3 control-label">文件上传：</label>
                    <div class="col-sm-8">
                        <input style="float:left" id="choosefile" name="choosefile" type="file" title="请选择要上传的文件" />
                        <a style="margin-left:10px;" href="javascript:cancelFile()">取消</a>
                    </div>
                </div>
                <div class="form-group" name="wechat">
                    <label class="col-sm-3 control-label">微信APPID：</label>
                    <div class="col-sm-8">
                        <input id="app_id" name="app_id" class="form-control" />
                        <span style="color:red">微信必填</span>
                    </div>
                </div>
                <div class="form-group" name="wechat">
                    <label class="col-sm-3 control-label">微信APPSECRET：</label>
                    <div class="col-sm-8">
                        <input id="app_secret" name="app_secret" class="form-control" />
                        <span style="color:red">微信必填</span>
                    </div>
                </div>
                <div class="form-group" name="wechat">
                    <label class="col-sm-3 control-label">微信开启类型：</label>
                    <div class="col-sm-8">
                        <input id="gzh" type="radio" name="wx_type" value="0" checked /><label for="gzh" style="margin-right:10px;">公众号</label>
                        <input id="QR" type="radio" name="wx_type" value="1" /><label for="QR">二维码</label>
                    </div>
                </div>
                <div class="form-group zhifu" name="zhifu">
                    <label class="col-sm-3 control-label">绑定域名：</label>
                    <div class="col-sm-8">
                        <input id="domain" name="domain" class="form-control" />
                        <span style="color:red">第三方要求的域名，不要输入http://</span>
                    </div>
                </div>
                <div class="form-group zhifu" name="zhifu">
                    <label class="col-sm-3 control-label">公钥：</label>
                    <div class="col-sm-8">
                        <textarea id="public_key" name="public_key" style="width:60%; height:160px;"></textarea>
                    </div>
                </div>
                <div class="form-group zhifu" name="zhifu">
                    <label class="col-sm-3 control-label">私钥：</label>
                    <div class="col-sm-8">
                        <textarea name="private_key" style="width:60%; height:160px;"></textarea>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- 全局js -->
    @*<script src="/js/jquery.min.js?v=2.1.4"></script>
        <script src="/js/bootstrap.min.js?v=3.3.6"></script>
        <script src="/js/plugins/layer/layer.min.js"></script>
        <script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
        <script src="/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
        <script src="/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
        <script src="~/Scripts/jquery.easyui.min.js"></script>
        <script src="~/js/plugins/chosen/chosen.jquery.js"></script>*@
    @Scripts.Render("~/js/admin")
</body>
</html>
<script type="text/javascript">
    $(function () {
        $('div[name="wechat"]').hide();
        $('div[name="zhifu"]').hide();
        $('#tb_payment').bootstrapTable({
            url: '/admin/WebSite/Get_ConfigPayMentList',
            uniqueId: 'ID',
            toolbar: '#toolbar',
            columns: [{
                field: 'ID',
                title: '序号'
            },
            {
                field: 'title',
                title: '支付名称'
            },
            {
                field: 'mch_id',
                title: '商户号'
            },
            {
                field: 'operate',
                title: '操作',
                formatter: operateFormatter //自定义方法，添加操作按钮
            }
            ],
        })
        function operateFormatter(value, row, index) {//赋予的参数
            return [
            '<a"><i name="edit" onclick="edit(' + row.ID + ')" class="glyphicon glyphicon-edit" style="margin-right: 10px;font-size: 17px; cursor: pointer; "></i></a>',
            '<i name="del" onclick="del(' + row.ID + ')" class="glyphicon glyphicon-remove" style="font-size: 17px; cursor: pointer;"></i>',
            ].join('');
        } 
    })
    
    function cancelFile() {
        $('#choosefile').val('')
    }
    function ANewUpload() {
        //$('#fileShow').hide(); 
        $("#fileUp").slideToggle("slow");
    }
    function RefreshInput() {
        $('div[name="wechat"]').hide();
        $('div[name="zhifu"]').hide();
        var selected = $('.chosen-select').val();
        if (selected == 'weixin') {
            //微信
            $('div[name="wechat"]').show();
            //上传过文件就隐藏上传div，显示文件路径
            if ($('#file').val() != '') {
                $('#fileShow').show();
                $('#fileUp').hide();
            } else {
                $('#fileShow').hide();
                $('#fileUp').show();
            }
        }
        if (selected == 'dinpay') {
            $('div[name="zhifu"]').show();
        }
        
    }
    $(".chosen-select").chosen({ "width": "100%" });
    $('.chosen-select').on('change', function (e, params) {
        RefreshInput(); 
    });
    //编辑
    function edit(id) {
        form_clear();
        var row = $('#tb_payment').bootstrapTable('getRowByUniqueId', id);
        //console.log(row);
        //把数据填充到form
        $('#form_edit').form('load', row);
        
        //先选中、后破坏、再加载
        $('.chosen-select').val(row.name).chosen("destroy").chosen({ "width": "100%" });
        RefreshInput();
        LayerOpen('编辑支付方式');
    }
    //添加
    function add() {
        form_clear();
        RefreshInput();
        $('.chosen-select').val('').chosen("destroy").chosen({ "width": "100%" });
        LayerOpen('添加支付方式');
    }
    //清除form表单
    function form_clear() {
        $('#form_edit').form('clear');
    }
    //弹出编辑框
    var layer_open;
    function LayerOpen(title) {
        layer_open = layer.open({
            title: title,
            area: ['60%', '75%'],
            type: 1,
            content: $('#edit')
          , btn: ['提交', '关闭']
          , yes: function (index, layero) {
              sub();
              //按钮【按钮一】的回调
          }, btn2: function (index, layero) {
              //按钮【按钮二】的回调
              return false;
          }
          , cancel: function () {
              //右上角关闭回调
          }
        });
    }
    //function 
    //提交
    function sub() {
        var layer_load;
        $('#form_edit').form('submit', {
            onSubmit: function () {
                if ($('#title').val().length == 0) {
                    layer.msg('请输入 支付名称');
                    return false;
                }
                if ($('#name').val() == '') {
                    layer.msg('请选择 商户目录名');
                    return false;
                }
                if ($('#mch_id').val().length == 0) {
                    layer.msg('请输入 商户号');
                    return false;
                }
                if ($('#api_key').val().length == 0) {
                    layer.msg('请输入 商户密钥');
                    return false;
                } 
                layer_load = layer.load();                
            },
            success: function (data) {
                layer.close(layer_load);//先关闭加载层
                data = eval('(' + data + ')');
                if (data.status == 0) {
                    var layer_alert = layer.alert(data.msg, {
                        icon: 1,
                        cancel: function () {
                            layer.closeAll();
                            $('#tb_payment').bootstrapTable('refresh');
                        }
                    }, function () {
                        layer.closeAll();
                        $('#tb_payment').bootstrapTable('refresh');
                    })
                } else {
                    layer.alert(data.msg, {
                        icon: 2,
                    })
                }
            }
        });
    }
    //删除
    function del(FID) {
        layer.confirm('确定删除？', {
            btn:['确定','取消']
        }, function () { 
            $.post('/Admin/WebSite/Del', { FID: FID }, function (data) {
                //data = eval('(' + data + ')');
                if (data.status == 0) {
                    var layer_alert = layer.alert(data.msg, {
                        icon: 1,
                        cancel: function () {
                            layer.closeAll();
                            $('#tb_payment').bootstrapTable('refresh');
                        }
                    }, function () {
                        layer.closeAll();
                        $('#tb_payment').bootstrapTable('refresh');
                    })
                } else {
                    layer.alert(data.msg, {
                        icon: 2,
                    })
                }
            })
        } )
    }
    
</script>